<template>
  <view>
    <van-sticky>

      <view class="demo-nav" style>
        <router-link :to="'/#'" class="demo-nav__back">
      
        </router-link>
      </view>
    </van-sticky>
    <view>
      <van-search
        v-model="value"
        show-action
        label=""
        placeholder="请输入搜索关键词"
        @search="onSearch"
      >
        <template #action>
          <view @click="onSearch">搜索</view>
        </template>
      </van-search>

    </view>


    <view>
		<swiper indicator-dots circular autoplay>
			<swiper-item v-for="(image, index) in images" :key="index">
				<image :src="image" mode="" style="width: 100%;" ></image>
			</swiper-item>
		</swiper>
      <!-- <van-swipe :autoplay="3000">
        <van-swipe-item v-for="(image, index) in images" :key="index">
          <img class="img_tu" v-lazy="image" />
        </van-swipe-item>
      </van-swipe> -->
    </view>



    <van-form style="text-align: center;background-color: #dcdee0;padding: 0.5rem">
      <view style="display: flex;">
       <!-- <van-col text="12">
          <van-cell is-link :value="areaTest" @click="showArea = true"/>
          <van-action-sheet v-model="showArea" title="地址">
            <van-area
              :area-list="areaList"
              :columns-placeholder="['请选择', '请选择', '请选择']"
              @cancel="cancelArea"
              @confirm = "confirmArea"
            />
          </van-action-sheet>
        </van-col> -->
			<button  style="width: 400rpx;height: 70rpx;line-height: 80rpx;background-color: #fff;color: gray;margin-left: 50rpx;" @click="btnClick">请选择地址</button>
			<selectAddress :value="areaTest" v-model="showArea" ref='selectAddress' @selectAddress="successSelectAddress"></selectAddress>

         <!-- <van-field
            readonly
            clickable
            name="picker"
            v-model="value"
            label=""
            placeholder="类型"
            right-icon="arrow-down"
            @click="showPicker = true"
          /> -->
		  <select style="width: 180rpx;height: 70rpx;">
		  
		  <option>类型</option>
		  
		  <option v-model="value"></option>
		  
		  </select>
          <van-popup v-model="showPicker" position="bottom">
            <van-picker
              show-toolbar
              :columns="columns"
              @confirm="onConfirm"
              @cancel="showPicker = false"
            />
          </van-popup>

          <!--<van-field-->
          <!--placeholder="用户名"-->
          <!--v-model="username"-->
          <!--/>-->
        </van-col>
        <van-col text="4">
          <view >
            <button style="height: 2.3rem;width: 100rpx;line-height: 80rpx;background-color: gray;color: #fff;" color="grey" native-type="submit" @click="submitButton">搜索</button>
          </view>
        </van-col>

      </view>

    </van-form>






    <view v-for="item in indexList">
      <!--这里有一个BUG 就是路由跳转的时候  需要图片和文字都要获取到id进行跳转-->
      <van-grid
        :column-num="2"
        :square="true"
        :border="false"
      >

        <van-grid-item @click="tiaohzuan(item.constructionId)">
          <image
            style="width: 100%; height: 100%;"
            src="https://img.yzcdn.cn/vant/cat.jpeg"
          />

        </van-grid-item>
        <van-grid-item
          @click="tiaohzuan(item.constructionId)"
          align="left"
        >
          <view>
            <!--<template slot-scope="scope">-->
            <!--<router-link :to="'/warehouse/type/waproduct/' + scope.row.wid" class="link-type">-->
            <!--<text>item.aaa</text>-->
            <!--</router-link>-->
            <!--</template>-->
            <view>{{item.constructionName}}</view>
            <view style="font-size: 0.2rem">已交保证金{{item.balanceMoney}}元</view>
            <view>
              <van-rate
                v-model="valuepx"
                allow-half
                void-icon="star"
                void-color="#eee"
              />
            </view>
            <view style="font-size: 0.6rem">{{item.descript}}</view>
            <view style="font-size: 0.6rem">{{item.address}}</view>
            <view style="font-size: 0.6rem">距离:2.8km</view>

          </view>
        </van-grid-item>

      </van-grid>

      <van-divider :style="{ color: '#1989fa', borderColor: '#1989fa', padding: '0 16px' }" />

    </view>

  </view>
</template>

<script>
  import areaList from '@/utils/area';
  import { findAllListBuilding, findAllById,findAllListAlladdres } from "@/api/constructionTeam/building";
  import { province, findByprovinceCode, findBycityCode } from "@/api/commodity/shop_product";
  import selectAddress from '@/components/yixuan-selectAddress/yixuan-selectAddress.vue';

  export default {
	  components: {selectAddress},
    data(){
      return{
        teamNamea:"",
        value: '',
        columns: ['家具', '灯具', '卫浴', '晾衣架', '窗帘', '智能锁', '水电', '断桥铝门窗'],
        showPicker: false,
        reslist:[],
        addressaa:"",
        areaList,
        addressaa:"",
        // 选择地区展示
        showArea:false,
        areaTest:"请选择省市区",
        form:{},
        constructionId: '',
        params: {
          pageNum: 1,
          pageSize: 10,
        },
        indexList: [],
        valuepx: 2.5,
        // 显示搜索条件
        showSearch: true,
        show: false,
        value: '',
        images: [
          'https://img.yzcdn.cn/vant/apple-1.jpg',
          'https://img.yzcdn.cn/vant/apple-2.jpg',
        ],

        AddressProvince: [],//省份集合
        AddressCity: [],//城市集合
        AddressTown: [],//区域集合
        provinceCode: '',//获取选中时的省份编号
        cityCode: '',//获取选中时的城市编号
        townCode: '', //获取选中时区域的编号
      }
    },

    created () {

      this.init();
      this.findAllListBuilding();
    },
    watch: {
      provinceCode: {
        handler () {
          this.AddressCity = [];
          this.AddressTown = [];
          this.cityCode = "";
          this.townCode = "";
          this.findByprovince();
        }
      },

      cityCode: {
        handler () {
          this.findBycity();
        }
      }

    },
    methods: {
		btnClick() {
		        this.$refs.selectAddress.show()
		    },
		    successSelectAddress(address){ //选择成功回调
		    console.log(address)
		        },
      onConfirm(value) {
        this.value = value;
        this.showPicker = false;
      },
      // 地址取消事件
      cancelArea(res){
        this.showArea = false;
      },
      // 地址确定事件
      confirmArea(res){
        this.areaTest = "";
        for (let i = 0; i < res.length; i++){
          this.areaTest += res[i].name;
        }
        for (let i=0;i<res.length;i++){
          console.log(this.addressaa = res[0].name+res[1].name+res[2].name)
        }
        var address = this.addressaa;
        findAllListAlladdres(address).then(res=>{
          this.indexList = res.data;
      })
        this.showArea = false;
      },
      tiaohzuan (constructionId) {
      
		uni.navigateTo({
			url:"/pages/building/ShopDetails?constructionId="+constructionId
		})
      },

      findAllListBuilding () {
        findAllListBuilding(this.params).then(res => {
          this.indexList = res.data.rows;
      })
      },


      init () {
        var that = this;
        province().then(res => {
          that.AddressProvince = res.data;
      })
      },

      findByprovince () {
        findByprovinceCode(this.provinceCode).then(res => {
          this.AddressCity = res.data;
      })
      },

      findBycity () {
        findBycityCode(this.cityCode).then(res => {
          this.AddressTown = res.data;
      })
      },






      /** 搜索按钮操作 */
      handleQuery () {
        this.params.pageNum = 1;
        this.findAllListBuilding();
      },
      /** 重置按钮操作 */
      resetQuery () {
        this.resetForm("queryForm");
        this.handleQuery();
      },

      onSearch () {
        console.log("111")
      },


      showPopup () {
        console.log("88888")
        this.show = true;
      },


    },

  }
</script>

<style scoped>

  .goods-card {
    margin: 0;
    background-color: @white;
  }

  .delete-button {
    height: 100%;
  }

  .demo-nav{
    position: relative;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    height: 3.2rem;
    background-color: #fff;
  }
  .demo-nav__title {
    font-weight: 450;
    font-size: 1.3rem;
    text-transform: capitalize;
  }
  .demo-nav__back {
    position: absolute;
    top: 16px;
    left: 16px;
    width: 24px;
    height: 24px;
    cursor: pointer;
  }
  .img_tu{
    width: 100%;
    height: 10rem;
  }

  .search_bar {
    display: flex;
    height: 10.133vw;
    width: 100%;
    margin-top: 1.867vw;
    line-height: 10.133vw;
    font-size: 3.733vw;
    background-color: #ffffff;
    border-radius: 13.333vw;
    box-shadow: 0.533vw 0.533vw 1.333vw rgb(219, 219, 219);
    padding: 0px 19.999px;
    box-sizing: border-box;
  }
  .hot_key {
    color: #000000;
  }
  .search_icon {
    line-height: 10.133vw;
    font-size: 4.8vw;
    margin-right: 2.667vw;
    color: #999999;
  }
  .content {
    padding: 0.16rem 0.16rem 1.6rem;
  }
  .index_header {
    height: 14.4vw;
    background-color: #ffffff;
    box-sizing: border-box;
    width: 100%;
    padding: 0px 4vw;
  }
  .area {
    height: 14.4vw;
    line-height: 14.4vw;
    color: #777777;
    width: 100%;
  }
</style>
